import { map } from "./530000_full.js";


import { hahaMapServerApi, infoApi } from "./service/pageAjax";
export default class canvasgeojson {
  ctx;
  canvas;
  render;
  scale = 10; // 默认缩放比例
  mapScale;
  animation = null;
  // 地图经纬度的中心点 改变这个值可 实现飞行
  mapCenterPos;
  // 坐标原点，该数据会在初始化的时候定位在页面正中间，后边会随着平移放大而改变
  pageSlicePos = {
    x: 0,
    y: 0,
  };
  // 鼠标的位置，通过这个来算是否选中地图元素、高亮等
  curMousePos = {
    x: 0,
    y: 0,
  };
  downMousePos = {
    x: 0,
    y: 0,
  };
  who = [];
  GRIDSIZE = 5; // 网格的大小

  imageSource = null

  Datainfo = [
    // {
    //   id: "point0",
    //   type: "point",
    //   coordinate: [102.68585751220705, 24.95637347363348],
    //   radius: 20,
    // },
    // {
    //   id: "point1",
    //   type: "point",
    //   coordinate: [102.704412, 25.342165],
    //   radius: 10,
    // },
    // {
    //   id: "text0",
    //   type: "text",
    //   name: "dffdsf",
    //   coordinate: [102.704412, 25.342165],
    //   color: "#ff4f02",
    //   fontSize: 40,
    // },
    // {
    //   id: "polygon0",
    //   type: "polygon",
    //   coordinate: [
    //     [102.712251, 25.140609],
    //     [102.712251, 24.140609],
    //     [103.712251, 24.140609],
    //   ],
    //   barckgroudColor: "blue",
    //   barckgroudColorHover: "red",
    //   cursor: "pointer",
    // },
  ];

  constructor(id, {} = {}) {
    this.loadImage();
    this.loadCanvas();
    this.init(id);
    this.mathInfo(map);

    this.drawLineGrid();
    this.getMap();

    // setTimeout(() => {
    //   this.saveImage();
    // }, 3000);

    // this.mapCenterPos = [102.920594, 25.4635225];

    // setTimeout(() => {
    //   this.flyto([103.120594, 25.9935225], 100, 2000);
    // }, 2000);
  }

  // XMin: 97.52755700100005;
  // YMin: 21.142119085000104;
  // XMax: 106.19697128500013;
  // YMax: 29.22577158200005;

  getMap() {
    const params = {
      dpi: 96,
      transparent: true,
      format: "png8",
      bbox: "97.52755700100005,21.142119085000104,106.19697128500013,29.22577158200005",
      bboxSR: 4490,
      imageSR: 4490,
      size: `${this.canvas.width}, ${this.canvas.height}`,
      f: "image",
    };
    hahaMapServerApi(params)
      .then((res) => {
        this.blobToBase64(res)
          .then((res) => {
            var image = new Image();
            image.src = res;
            image.onload = () => {
               this.imageSource = image;
             
            };
          })
          .catch((err) => {

          });
      })
      .catch((e) => {

      });
    
    
    // infoApi().then(res => { 

    // })
  }

  init(id) {
    this.canvas = document.getElementById(id);
    // this.canvas.addEventListener("mousemove", (e) => {
    //   this.mouseMove(e, this);
    // });

    this.canvas.addEventListener("mousemove", this.mouseMove.bind(this));
    this.canvas.addEventListener("mousewheel", this.mouseWheel.bind(this));
    this.canvas.addEventListener("mousedown", this.mouseDown.bind(this));
    this.pageSlicePos = {
      // 坐标系的原点
      x: this.canvas.width / 2,
      y: this.canvas.height / 2,
    };

    this.ctx = this.canvas.getContext("2d");
  }

  mathInfo(map) {
    const arrX = [];
    const arrY = [];
    map.features.forEach((item) => {
      let coordinates = item.geometry.coordinates;
      coordinates.forEach((data) => {
        data.forEach((data1) => {
          if (data1.length > 2) {
            data1.forEach((data2, i) => {
              arrX.push(data2[0]);
              arrY.push(data2[1]);
            });
          }
        });
      });
    });
    const left = Math.min(...arrX);
    const right = Math.max(...arrX);
    const topp = Math.min(...arrY);
    const bottom = Math.max(...arrY);



    this.mapH = topp + bottom;
    this.mapW = left + right;
    this.mapCenterPos = [this.mapW / 2, this.mapH / 2];


    const lenx = right - left;
    const leny = bottom - topp;

    const ratioX = this.canvas.width / lenx / 2;
    const ratioY = this.canvas.height / leny / 2;
    this.mapScale = ratioX > ratioY ? ratioY : ratioX;

  }

  drawLineGrid = () => {
    const ctx = this.ctx;
    ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);



    if (this.imageSource) {
      const pos = this.coordinateToPixel([97.920594, 28.4635225]);
      this.ctx.drawImage(
        this.imageSource,
        pos.x,
        pos.y,
        this.canvas.width,
        this.canvas.height
      );
    }

    this.drawImage({
      ctx,
      coordinate: [102.920594, 25.4635225],
    });

    this.who = [];
    this.Datainfo.forEach((item) => {
      if (item.type === "point") {
        this.drawPoint({
          ctx,
          color: item.color,
          coordinate: item.coordinate,
          radius: item.radius,
        });
      } else if (item.type === "text") {
        this.drawText({
          ctx,
          text: item.name,
          coordinate: item.coordinate,
          fontSize: item.fontSize,
          textAlign: "center",
          color: item.color,
        });
      } else if (
        item.type === "polygon" ||
        item.type === "polyline" ||
        item.type === "geo"
      ) {
        this.drawPolygon({
          ctx: this.ctx,
          coordinates: [
            [102.712251, 25.140609],
            [102.712251, 24.140609],
            [103.712251, 24.140609],
          ],
          barckgroudColor: item.barckgroudColor,
          barckgroudColorHover: item.barckgroudColorHover,
          cursor: item.cursor,
        });
      }

      if (ctx.isPointInPath(this.downMousePos.x, this.downMousePos.y)) {
        this.who.push(item);
      }
    });
  };

  coordinateToPixel(coordinate) {
    let mapX = coordinate[0] - this.mapCenterPos[0];


    let mapY = this.mapH - (coordinate[1] + this.mapCenterPos[1]);


    return this.getPixelPos({
      x: mapX * this.mapScale,
      y: mapY * this.mapScale,
    });
  }

  drawPoint({ ctx, coordinate, color = "#999", radius = 10 }) {
    const pos = this.coordinateToPixel(coordinate);
    ctx.beginPath();
    ctx.fillStyle = color;
    ctx.arc(pos.x, pos.y, radius, 0, 2 * Math.PI);
    ctx.fill();
  }

  flyto(coordinate, scale, duration = 2000) {
    // this.mapCenterPos = coordinate;
    // this.scale = scale;
    this.animation = [
      {
        key: "mapCenterPosX",
        history: this.mapCenterPos[0],
        future: coordinate[0],
        dur:
          (parseFloat(coordinate[0]) - parseFloat(this.mapCenterPos[0])) /
          (duration / 16),
      },
      {
        key: "mapCenterPosY",
        history: this.mapCenterPos[1],
        future: coordinate[1],
        dur:
          (parseFloat(coordinate[1]) - parseFloat(this.mapCenterPos[1])) /
          (duration / 16),
      },
      {
        key: "scale",
        history: this.scale,
        future: scale,
        dur: (parseFloat(scale) - parseFloat(this.scale)) / (duration / 16),
      },
    ];
  }

  flyLayer(coordinate) {


    const arrX = [];
    const arrY = [];
    coordinate.forEach((item) => {
      arrX.push(item[0]);
      arrY.push(item[1]);
    });
    const left = Math.min(...arrX);
    const right = Math.max(...arrX);
    const topp = Math.min(...arrY);
    const bottom = Math.max(...arrY);
    this.mapH = topp + bottom;
    this.mapW = left + right;
    this.mapCenterPos = [this.mapW / 2, this.mapH / 2];


    //  const lenx = right - left;
    //  const leny = bottom - topp;

    //  const ratioX = this.canvas.width / lenx / 2;
    //  const ratioY = this.canvas.height / leny / 2;
    //  this.mapScale = ratioX > ratioY ? ratioY : ratioX;

  }

  hexToRgb(color) {
    var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
    color = color.replace(shorthandRegex, function (m, r, g, b) {
      return r + r + g + g + b + b;
    });

    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color);
    return result
      ? {
          r: parseInt(result[1], 16),
          g: parseInt(result[2], 16),
          b: parseInt(result[3], 16),
        }
      : {
          r: 0,
          g: 0,
          b: 0,
        };
  }

  loadCanvas() {
    let tempCanvas = document.createElement("canvas");
    tempCanvas.width = 20;
    tempCanvas.height = 20;
    let tempCtx = tempCanvas.getContext("2d");
    const img = new Image();
    const svg =
      '<svg t="1692001584704" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14075" width="200" height="200"><path d="M72.851741 608.286567q70.304478-15.283582 140.099502 3.566169t124.81592 71.832836q26.491542 26.491542 44.831841 59.60597t28.0199 68.776119 10.189055 72.342289-6.622886 70.304478q-69.285572 15.283582-139.59005-8.151244t-124.306468-77.436816q-55.020896-52.983085-73.870647-122.778109t-3.566169-138.061692zM886.957214 608.286567q15.283582 68.266667-3.566169 138.061692t-72.851741 122.778109q-26.491542 26.491542-62.153234 44.322388t-75.399005 28.529353-82.021891 14.264677-83.040796 1.528358l-59.096517 0 0-383.108458q-59.096517-6.113433-110.041791-32.604975-39.737313-20.378109-72.851741-50.945274t-56.549254-68.266667-36.680597-81.512438-13.245771-91.701493q0-64.191045 25.472637-124.306468 48.907463 12.226866 90.173134 37.19005t73.870647 60.624876q9.170149-69.285572 45.341294-126.853731t91.19204-96.286567q57.058706 38.718408 93.229851 97.814925t44.322388 129.400995q32.604975-35.661692 74.3801-61.643781t90.682587-38.208955q23.434826 58.077612 23.434826 122.268657 0 46.869652-12.736318 90.682587t-36.680597 81.512438-56.549254 68.266667-72.342289 50.945274l0 1.018905q-28.529353 14.264677-58.587065 22.925373t-62.662687 10.698507l0 274.085572q12.226866-41.775124 37.699502-79.98408t59.096517-70.81393q26.491542-26.491542 60.624876-46.869652t70.81393-32.604975 74.3801-15.283582 72.342289 4.075622z" p-id="14076"></path></svg>';
    img.src = "data:image/svg+xml," + svg;
    tempCtx.drawImage(img, 0, 0, 15, 15);

    img.onload = () => {
      this.img2 = tempCanvas;
    };
    setTimeout(() => {
      this.img2 = tempCanvas;
    }, 0);
  }

  loadImage() {
    const img = new Image();

    // img.src = "1.png";

    const svg2 =
      '<svg t="1691997891977" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10023" width="200" height="200"><path d="M106.334372 346.650052a53.167186 53.167186 0 0 1-74.43406 0 53.167186 53.167186 0 0 1 0-75.497404L271.152648 27.646937a53.167186 53.167186 0 0 1 75.497404 0 53.167186 53.167186 0 0 1 0 74.43406L106.334372 346.650052M106.334372 670.969886a51.040498 51.040498 0 0 1-74.43406 0 51.040498 51.040498 0 0 1 0-74.43406L596.535826 27.646937a51.040498 51.040498 0 0 1 74.43406 0 51.040498 51.040498 0 0 1 0 74.43406L106.334372 670.969886M752.847352 996.353063a53.167186 53.167186 0 1 1-75.497404-75.497404l243.505711-243.505711a53.167186 53.167186 0 0 1 75.497404 0 54.23053 54.23053 0 0 1 0 75.497404L752.847352 996.353063M425.337487 996.353063a53.167186 53.167186 0 1 1-75.497404-75.497404l571.015576-568.888888a53.167186 53.167186 0 1 1 75.497404 73.370716L425.337487 996.353063M106.334372 996.353063a53.167186 53.167186 0 0 1-74.43406 0 53.167186 53.167186 0 0 1 0-75.497404L920.855659 27.646937a53.167186 53.167186 0 0 1 75.497404 0 53.167186 53.167186 0 0 1 0 74.43406L106.334372 996.353063"  p-id="10024"></path></svg>';

    const svg =
      '<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4814" width="200" height="200"><path d="M0 278.698667L278.698667 0H182.101333L0 182.101333v96.597334zM0 543.232L543.232 0H446.634667L0 446.634667v96.597333zM841.898667 1024L1024 841.898667V745.301333L745.301333 1024h96.597334zM577.365333 1024L1024 577.365333V480.768L480.768 1024h96.597333zM312.832 1024L1024 312.832V216.234667L216.234667 1024h96.597333zM1024 0h-48.298667L0 975.701333V1024h48.298667L1024 48.298667V0zM0 807.765333L807.765333 0H711.168L0 711.168v96.597333z"  p-id="4815"></path></svg>';

    // img.src = "data:image/svg+xml," + unescape(encodeURIComponent(svg)); //svg内容中可以有中文字符

    img.src = "data:image/svg+xml," + svg; //svg内容中不能有中文字符
    img.width = "10px";
    img.height = "10px";
    this.img = img;
    img.onload = () => {
      this.img = img;
    };
  }

  drawImage({ ctx, coordinate }) {
    const pos = this.coordinateToPixel(coordinate);

    if (this.img) {
      ctx.beginPath();
      const pattern = ctx.createPattern(this.img, "repeat");

      const barckgroudColor = "blue";
      const barckgroudColorHover = "red";
      const cursor = "pointer";
      const coordinates = [
        [102.712251, 25.140609],
        [102.712251, 24.140609],
        [103.712251, 24.140609],
      ];

      this.drawPolygon({
        ctx: this.ctx,
        coordinates: [
          [102.712251, 25.140609],
          [104.712251, 24.140609],
          [102.712251, 24.140609],
          [107.712251, 24.140609],
        ],
        barckgroudColor: pattern,
        barckgroudColorHover: barckgroudColorHover,
        cursor: cursor,
      });


      // if (this.img) {
      //   ctx.clip();
      //      ctx.drawImage(this.img, pos.x, pos.y);
      //   this.img = null
      // }

      // ctx.beginPath()
      // ctx.arc(pos.x, pos.y, 200, 0, 20 * Math.PI);
      // ctx.clip();
      // ctx.drawImage(img, 90, 90, 120, 120);

      // ctx.drawImage(this.img, pos.x, pos.y);

      // ctx.drawImage(img, 90, 90, 120, 120);

      // ctx.beginPath();
      // ctx.fillRect(pos.x, pos.y, 300, 300);
    }
  }

  drawGeoJson(map, scale) {
    const ctx = this.ctx;
    /** 绘制边界 */
    map.features.forEach((item) => {
      this.drawPolygon({
        ctx,
        type: "geo",
        coordinates: item.geometry.coordinates,
        barckgroudColorHover: "yellow",
      });

      /** 绘制文字 */
      if (
        item.properties.center &&
        item.properties.center.length == 2 &&
        this.scale > 3
      ) {
        this.drawText({
          ctx,
          text: item.properties.name,
          coordinate: item.properties.center,
        });
      }
    });
  }

  drawPolygon({
    ctx,
    coordinates,
    type = "polygon", // pylygon pylyline geo
    borderColor = "#000",
    borderWidth = 1,
    setLineDash = [3], // 可传入指譬如[3, 5]
    barckgroudColor = "#ccc",
    barckgroudColorHover = "",
    cursor = "default",
  }) {
    if (type === "geo") {
      ctx.beginPath();
      coordinates.forEach((data) => {
        data.forEach((item, index) => {
          if (item.length > 2) {
            ctx.strokeStyle = borderColor;
            ctx.lineWidth = borderWidth;
            ctx.setLineDash(setLineDash);
            item.forEach((data2, i) => {
              const pos = this.coordinateToPixel(data2);
              if (i === 0) {
                ctx.moveTo(pos.x, pos.y);
              }
              ctx.lineTo(pos.x, pos.y);
            });
            ctx.stroke();
            if (type === "polygon" || type === "geo") {
              if (this.img2 && item.length === 261) {
                const pattern = ctx.createPattern(this.img2, "repeat");
                ctx.fillStyle = pattern;
              } else if (this.img && item.length === 408) {
                const pattern = ctx.createPattern(this.img, "repeat");

                ctx.fillStyle = pattern;
              } else {
                ctx.fillStyle = barckgroudColor;
              }

              // ctx.fillStyle = barckgroudColor;
              ctx.fill();
              let isPointIn = ctx.isPointInPath(
                this.curMousePos.x,
                this.curMousePos.y
              );
              if (isPointIn) {
                barckgroudColorHover && (ctx.fillStyle = barckgroudColorHover);
                ctx.fill();
                if (cursor) this.canvas.style.cursor = cursor;
              }
            }
            if (this.img && item.length === 408) {
              // const pattern = ctx.createPattern(this.img, "repeat");
              // ctx.save();
              // ctx.clip();
              // ctx.drawImage(
              //   this.img,
              //   218,
              //   417,
              //   400,400
              //   // this.canvas.width,
              //   // this.canvas.height
              // );
              // ctx.restore();
            }
          }
        });
      });
    } else {
      if (coordinates.length > 2) {
        ctx.beginPath();
        ctx.strokeStyle = borderColor;
        ctx.lineWidth = borderWidth;
        ctx.setLineDash(setLineDash);
        coordinates.forEach((data2, i) => {
          const pos = this.coordinateToPixel(data2);

          if (i === 0) {
            ctx.moveTo(pos.x, pos.y);
          }
          ctx.lineTo(pos.x, pos.y);
        });
        ctx.stroke();
        if (type === "polygon") {
          ctx.fillStyle = barckgroudColor;
          ctx.fill();
          let isPointIn = ctx.isPointInPath(
            this.curMousePos.x,
            this.curMousePos.y
          );
          if (isPointIn) {
            barckgroudColorHover && (ctx.fillStyle = barckgroudColorHover);
            ctx.fill();
            cursor
              ? (this.canvas.style.cursor = cursor)
              : (this.canvas.style.cursor = "defalut");
          }
        }
      }
    }
  }

  /**
   * 绘制文字
   * @param {*} ctx
   * @param {*} text 文字
   * @param {*} coordinate 坐标 [102.712251, 25.140609]
   * @param {} color 颜色
   * @param {} fontSize 字体大小
   * @param {} fontWeight 粗细
   * @param {} textAlign 对齐
   * @param {} strokeWidth 边框粗细
   * @param {} strokeColor 边框颜色
   */
  drawText = ({
    ctx,
    coordinate,
    text,
    color = "#000",
    fontSize = 12,
    fontWeight = 400,
    textAlign = "center",
    strokeWidth = 0,
    strokeColor = "#fff",
  } = {}) => {
    const pos = this.coordinateToPixel(coordinate);
    ctx.beginPath();
    ctx.fillStyle = color;
    ctx.textAlign = textAlign;
    // "Microsoft YaHei";
    // sans-serif;
    // ctx.font = `normal ${fontWeight} ${fontSize}px Microsoft YaHei`;
    ctx.font = `${fontWeight} ${fontSize}px Microsoft YaHei`;
    ctx.strokeStyle = strokeColor;
    ctx.lineWidth = strokeWidth;
    strokeWidth && ctx.strokeText(text, pos.x, pos.y);
    ctx.fillText(text, pos.x, pos.y);
  };

  /**
   * 获取像素位置
   * @param {*} point
   * @returns
   */
  getPixelPos(point) {
    this.scale = 1
    this.GRIDSIZE = 1
    return {
      x: this.pageSlicePos.x + (point.x / this.GRIDSIZE) * this.scale,
      y: this.pageSlicePos.y + (point.y / this.GRIDSIZE) * this.scale,
    };
  }

  /**
   * 鼠标移动
   */
  mouseMove(e) {
    this.curMousePos.x = e.clientX;
    this.curMousePos.y = e.clientY;
  }

  /**
   * 滚轮缩放倍数
   */
  mouseWheel(e) {
    if (e.wheelDelta > 0) {
      if (this.scale < 2000) {
        this.scale++;
      }
    } else {
      if (this.scale > 1) {
        this.scale--;
      }
    }
  }

  /**
   * 拖动 canvas 动态渲染，拖动时，动态设置 pageSlicePos 的值
   * @param e Event
   */
  mouseDown(
    e,
    callback = (e) => {
      this.onClick(e);
    }
  ) {
    callback(e);

    this.downMousePos = {
      x: e.clientX,
      y: e.clientY,
    };

    const downX = e.clientX;
    const downY = e.clientY;
    const { x, y } = this.pageSlicePos;
    this.canvas.onmousemove = (ev) => {
      const moveX = ev.clientX;
      const moveY = ev.clientY;
      this.pageSlicePos.x = x + (moveX - downX);
      this.pageSlicePos.y = y + (moveY - downY);
      this.canvas.onmouseup = (en) => {
        myCanvas.onmousemove = null;
        myCanvas.onmouseup = null;
      };
    };
    this.canvas.onmouseup = (en) => {
      this.canvas.onmousemove = null;
      this.canvas.onmouseup = null;
    };
  }

  onClick(e) {
    setTimeout(() => {


      this.who.forEach((item) => {
        if (item.type === "polygon") {
          this.flyLayer(item.coordinate);
        }
      });
    }, 50);

    // this.draw(this.ctx, this.curMousePos);

    // let isPointIn = this.ctx.isPointInPath(
    //   this.curMousePos.x,
    //   this.curMousePos.y
    // );
    // if (isPointIn) {

    // }
  }

  //图形绘制
  draw(ctx, p) {
    var who = []; //保存点击事件包含图形的index值
    ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);

    this.Data.forEach((item, index) => {
      this.drawPoint({
        ctx,
        color: item.color,
        coordinate: item.coordinate,
      });
      if (p && ctx.isPointInPath(p.x, p.y)) {
        //如果传入了事件坐标，就用isPointInPath判断一下
        //如果当前环境覆盖了该坐标，就将图形的index放到数组里
        who.push(index);
      }
    });

    //根据数组中的index值，可以到arr数组中找到相应的元素。
    return who;
  }

  /**
   * 图片blob转图片base64
   * @param blob
   */
  blobToBase64(blob) {
    return new Promise((resolve, reject) => {
      const fileReader = new FileReader();
      fileReader.onload = (e) => {
        resolve(e.target.result);
      };
      // readAsDataURL
      fileReader.readAsDataURL(blob);
      fileReader.onerror = () => {
        reject(new Error("blobToBase64 error"));
      };
    });
  }

  /**
   * 图片base64转blob
   * @param base64 base64图片
   */
  base64ToBlob(base64) {
    let bstr = window.atob(base64),
      n = bstr.length,
      u8arr = new Uint8Array(n);
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], { type: base64 });
  }

  /**
   * 保存图片
   * @param {*} name 图片名称
   * @param {*} format 图片格式 png jpeg
   * @param {*} quality 图片质量 0-1
   */
  saveImage({ name = "我的截图", format = "png", quality = 1 } = {}) {
    const link = document.createElement("a");
    const imgData = this.canvas.toDataURL({
      format: format,
      quality: quality,
      width: this.canvas.width,
      height: this.canvas.height,
    });
    const dataURLtoBlob = (dataurl) => {
      let arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: mime });
    };
    const blob = dataURLtoBlob(imgData);
    const objurl = URL.createObjectURL(blob);
    link.download = `${name}.${format}`;
    link.href = objurl;
    link.click();
  }
  start() {
    this.drawLineGrid();
    this.render = requestAnimationFrame(this.start.bind(this));


    if (this.animation) {
      let isf = false;
      this.animation.forEach((item) => {
        if (item.key === "mapCenterPosX") {
          this.mapCenterPos = [
            (this.mapCenterPos[0] += item.dur),
            this.mapCenterPos[1],
          ];
          if (this.mapCenterPos[0] > item.future) {
            isf = true;
          }
        } else if (item.key === "mapCenterPosY") {
          this.mapCenterPos = [
            this.mapCenterPos[0],
            (this.mapCenterPos[1] += item.dur),
          ];
        } else if (item.key === "scale") {
          this.scale = this.scale += item.dur;
        }
      });

      if (isf) {
        this.animation = null;
      }
    }
  }
  destroy() {
    cancelAnimationFrame(this.render);
  }
}
